<%@ page import="com.hotel.entity.Book" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="<%=request.getContextPath()%>/hotel//js/calendar.js"></script>
  <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/hotel/style/style.css"></link>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(to right, #e0f7fa, #80deea);
    }

    #container {
      max-width: 900px;
      margin: 0 auto;
      padding: 20px;
    }

    #header ul, #menu ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: flex-end;
      background-color: #006064;
    }

    #header ul li, #menu ul li {
      padding: 10px 15px;
    }

    #header ul li a, #menu ul li a {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }

    #header ul li a:hover, #menu ul li a:hover {
      text-decoration: underline;
    }

    #content {
      padding: 20px 0;
      display: flex;
      justify-content: center;
    }

    table {
      width: 100%;
      max-width: 800px;
      border-collapse: collapse;
      background-color: #ffffff;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      border-radius: 8px;
      overflow: hidden;
      font-size: 0.95em;
    }

    caption {
      padding: 20px 0;
      font-size: 1.5em;
      font-weight: bold;
      text-align: center;
      color: #006064;
    }

    th, td {
      border: 1px solid #b0bec5;
      padding: 12px 15px;
      text-align: center;
      vertical-align: middle;
    }

    th {
      background-color: #00838f;
      color: white;
      font-weight: bold;
    }

    td {
      color: #333;
    }

    .type {
      width: 150px;
    }

    .price {
      width: 120px;
    }

    .introduce {
      text-align: left;
      padding-left: 15px;
    }

    #content div.button {
      text-align: center;
      padding-top: 15px;
    }

    hr {
      margin-top: 40px;
      border: none;
      border-top: 1px solid #ccc;
    }

    #footer {
      text-align: center;
      padding: 20px;
      font-size: 0.9em;
      color: #666;
    }
  </style>

  <title>图书列表</title>
</head>
<body>
        <%
          List<Book> books=(List<Book>)request.getAttribute("cgs");
        %>
<div id="container">
  <div id="header">
    <ul>
    <li><a href="#">帮助</a></li>
  </ul>
  </div>
  <div id="menu">
    <ul>
      <li><a href="<%=request.getContextPath()%>/hotel/index.jsp">首页</a></li>
      <li><a href="<%=request.getContextPath()%>/list.book">图书列表</a></li>
      <li><a href="<%=request.getContextPath()%>/list.subscription">会员中心</a></li>
    </ul>
  </div>
  <div id="content">
    <table>
      <colgroup>
        <col class="type" />
        <col class="introduce" />
      </colgroup>
      
      <caption>图书列表</caption>
      
      <tr>
        <th>书名</th>
        <th>作者</th>
        <th>介绍</th>
      </tr>

      <%
          for(Book c:books){
      %>
      <tr>
        <td><div><%=c.getName()%></div></td>
        <td><div><%=c.getAuthor()%></div></td>
        <td><%=c.getIntroduce()%></td>
      </tr>
      <%
          }
      %>
    </table>
  </div>
  <hr />
  <div id="footer">
  </div>
</div>
</body>
</html>